<!--
 * @Author: your name
 * @Date: 2021-04-21 15:16:08
 * @LastEditTime: 2021-05-20 11:44:40
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \admin_front_end\src\views\setting\Notice.vue
-->
<template>
  <page-header-wrapper>
    <div v-if="setting">
      <a-card :bordered="false" class="card_top_padding no_need_padding" style="margin-bottom: 11px">
        <a-tabs default-active-key="1" @change="changeTabs">
          <a-tab-pane key="1" tab="买家通知"> </a-tab-pane>
          <a-tab-pane key="2" tab="卖家通知"> </a-tab-pane>
          <a-tab-pane key="3" tab="短信配置"> </a-tab-pane>
        </a-tabs>
      </a-card>
      <a-card :bordered="false">
        <div v-if="currentTab == '1'">
          <a-alert
            message="订单提交通知、订单支付通知、订单发货通知、门店到货通知、订单自提通知，订阅消息仅能开启其中三个，请根据实际情况谨慎配置。"
            banner
          />
          <table style="margin-top: 10px">
            <tr style="border-top: 1px solid #e8e8e8;background:rgb(250, 250, 250);border-radius:5px 5px 0 0 ">
              <th>推送列表</th>
              <th>内容</th>
              <th>短信</th>
              <th>小程序订阅消息</th>
              <th>公众号订阅消息</th>
              <th>规则</th>
            </tr>
            <!-- 订单通知 -->
            <NoticeTemplate
              @setSetting="setSetting"
              sendType="order_submit"
              desc="订单提交成功时，立即通知买家"
              :rowspan="5"
              rowspanTitle="订单通知"
              title="订单提交通知"
              :settingInfo="setting.order_submit"
            >
            </NoticeTemplate>
            <NoticeTemplate
              @setSetting="setSetting"
              sendType="order_pay"
              desc="订单支付成功时，立即通知买家"
              :rowspan="0"
              rowspanTitle=""
              title="订单支付通知"
              :settingInfo="setting.order_pay"
            >
            </NoticeTemplate>
            <NoticeTemplate
              @setSetting="setSetting"
              sendType="order_cancel"
              desc="订单取消成功时，立即通知买家"
              :rowspan="0"
              rowspanTitle=""
              title="订单取消通知"
              :settingInfo="setting.order_cancel"
            >
            </NoticeTemplate>
            <NoticeTemplate
              @setSetting="setSetting"
              sendType="order_refund"
              desc="订单退款成功时，立即通知买家"
              :rowspan="0"
              rowspanTitle=""
              title="订单退款通知"
              :settingInfo="setting.order_refund"
            >
            </NoticeTemplate>
            <NoticeTemplate
              @setSetting="setSetting"
              sendType="order_refund_cancel"
              desc="订单拒绝退款时，立即通知买家"
              :rowspan="0"
              rowspanTitle=""
              title="订单拒绝退款通知"
              :settingInfo="setting.order_refund_cancel"
            >
            </NoticeTemplate>
            <!-- 配送通知 -->
            <NoticeTemplate
              @setSetting="setSetting"
              sendType="order_send"
              desc="商家完成发货后立即通知买家"
              :rowspan="3"
              rowspanTitle="配送通知"
              title="订单发货通知"
              :settingInfo="setting.order_send"
            >
            </NoticeTemplate>
            <NoticeTemplate
              @setSetting="setSetting"
              sendType="shop_arrive"
              desc="向用户发送订单到货信息"
              :rowspan="0"
              rowspanTitle=""
              title="门店到货通知"
              :settingInfo="setting.shop_arrive"
            >
            </NoticeTemplate>
            <NoticeTemplate
              @setSetting="setSetting"
              sendType="shop_offline"
              desc="买家完成付款提醒买家自提"
              :rowspan="0"
              rowspanTitle=""
              title="订单自提通知"
              :settingInfo="setting.shop_offline"
            >
            </NoticeTemplate>
            <!-- 会员账户通知 -->
            <NoticeTemplate
              @setSetting="setSetting"
              sendType="user_chang"
              desc="会员账户变动时立即通知"
              :rowspan="1"
              rowspanTitle="会员账户通知"
              title="账户变动通知"
              :settingInfo="setting.user_chang"
            >
            </NoticeTemplate>
            <!-- 分销通知 -->
            <NoticeTemplate
              @setSetting="setSetting"
              sendType="cash_success"
              desc="提现审核成功后通知会员"
              :rowspan="3"
              rowspanTitle="分销通知"
              title="提现成功通知"
              :settingInfo="setting.cash_success"
            >
            </NoticeTemplate>
            <NoticeTemplate
              @setSetting="setSetting"
              sendType="cash_fail"
              desc="提现审核失败后通知会员"
              :rowspan="0"
              rowspanTitle=""
              title="提现失败通知"
              :settingInfo="setting.cash_fail"
            >
            </NoticeTemplate>
            <NoticeTemplate
              @setSetting="setSetting"
              sendType="share_examine"
              desc="提现审核失败后通知会员"
              :rowspan="0"
              rowspanTitle=""
              title="分销审核通知"
              :settingInfo="setting.share_examine"
            >
            </NoticeTemplate>
            <!-- 拼团通知 -->
            <NoticeTemplate
              @setSetting="setSetting"
              sendType="pt_success"
              desc="拼团成功时立即通知买家"
              :rowspan="2"
              rowspanTitle="拼团通知"
              title="拼团成功通知"
              :settingInfo="setting.pt_success"
            >
            </NoticeTemplate>
            <NoticeTemplate
              @setSetting="setSetting"
              sendType="pt_fail"
              desc="拼团成功时立即通知买家"
              :rowspan="0"
              rowspanTitle=""
              title="拼团失败通知"
              :settingInfo="setting.pt_fail"
            >
            </NoticeTemplate>
            <!-- 验证码通知 -->
            <NoticeTemplate
              @setSetting="setSetting"
              sendType="register"
              desc="注册、登录发送验证码"
              :rowspan="1"
              rowspanTitle="验证码通知"
              title="手机注册通知"
              :settingInfo="setting.register"
            >
            </NoticeTemplate>

            <!-- 认养通知 -->
            <NoticeTemplate
              @setSetting="setSetting"
              sendType="adopt_mature"
              desc="未选择采摘超时提示时间"
              :rowspan="15"
              rowspanTitle="认养通知"
              title="未选择采摘超时提示时间"
              :settingInfo="setting.adopt_mature"
            >
            </NoticeTemplate>

            <NoticeTemplate
              @setSetting="setSetting"
              sendType="adopt_storage"
              desc="未选择保管超时提示时间"
              :rowspan="0"
              rowspanTitle="认养通知"
              title="未选择保管超时提示时间"
              :settingInfo="setting.adopt_storage"
            >
            </NoticeTemplate>

            <NoticeTemplate
              @setSetting="setSetting"
              sendType="adopt_preserve"
              desc="免费保管提示时间"
              :rowspan="0"
              rowspanTitle="认养通知"
              title="免费保管提示时间"
              :settingInfo="setting.adopt_preserve"
            >
            </NoticeTemplate>
            <NoticeTemplate
              @setSetting="setSetting"
              sendType="adopt_order_confirm_mature"
              desc="确认成熟提示买家"
              :rowspan="0"
              rowspanTitle="认养通知"
              title="确认成熟提示买家"
              :settingInfo="setting.adopt_order_confirm_mature"
            >
            </NoticeTemplate>
            <NoticeTemplate
              @setSetting="setSetting"
              sendType="adopt_order_self_pick"
              desc="用户选择自采提示买家"
              :rowspan="0"
              rowspanTitle="认养通知"
              title="用户选择自采提示买家"
              :settingInfo="setting.adopt_order_self_pick"
            >
            </NoticeTemplate>
            <NoticeTemplate
              @setSetting="setSetting"
              sendType="adopt_order_other_pick"
              desc="用户选择代采提示买家"
              :rowspan="0"
              rowspanTitle="认养通知"
              title="用户选择代采提示买家"
              :settingInfo="setting.adopt_order_other_pick"
            >
            </NoticeTemplate>
            <NoticeTemplate
              @setSetting="setSetting"
              sendType="adopt_order_confirm_self_pick_book"
              desc="确认自采预约提示买家"
              :rowspan="0"
              rowspanTitle="认养通知"
              title="确认自采预约提示买家"
              :settingInfo="setting.adopt_order_confirm_self_pick_book"
            >
            </NoticeTemplate>
            <NoticeTemplate
              @setSetting="setSetting"
              sendType="adopt_order_start_self_pick"
              desc="用户选择开始自采提示买家"
              :rowspan="0"
              rowspanTitle="认养通知"
              title="用户选择开始自采提示买家"
              :settingInfo="setting.adopt_order_start_self_pick"
            >
            </NoticeTemplate>
            <NoticeTemplate
              @setSetting="setSetting"
              sendType="adopt_order_end_self_pick"
              desc="用户选择自采结束提示买家"
              :rowspan="0"
              rowspanTitle="认养通知"
              title="用户选择自采结束提示买家"
              :settingInfo="setting.adopt_order_end_self_pick"
            >
            </NoticeTemplate>
            <NoticeTemplate
              @setSetting="setSetting"
              sendType="adopt_order_confirm_self_pick_finish"
              desc="确认自采完成提示买家"
              :rowspan="0"
              rowspanTitle="认养通知"
              title="确认自采完成提示买家"
              :settingInfo="setting.adopt_order_confirm_self_pick_finish"
            >
            </NoticeTemplate>
            <NoticeTemplate
              @setSetting="setSetting"
              sendType="adopt_order_pick_take"
              desc="用户选择带走提示买家"
              :rowspan="0"
              rowspanTitle="认养通知"
              title="用户选择带走提示买家"
              :settingInfo="setting.adopt_order_pick_take"
            >
            </NoticeTemplate>
            <NoticeTemplate
              @setSetting="setSetting"
              sendType="adopt_order_storage"
              desc="用户选择入库提示买家"
              :rowspan="0"
              rowspanTitle="认养通知"
              title="用户选择入库提示买家"
              :settingInfo="setting.adopt_order_storage"
            >
            </NoticeTemplate>
            <NoticeTemplate
              @setSetting="setSetting"
              sendType="adopt_order_confirm_storage"
              desc="确认入库提示买家"
              :rowspan="0"
              rowspanTitle="认养通知"
              title="确认入库提示买家"
              :settingInfo="setting.adopt_order_confirm_storage"
            >
            </NoticeTemplate>
            <NoticeTemplate
              @setSetting="setSetting"
              sendType="adopt_order_preserve"
              desc="用户选择保管提示买家"
              :rowspan="0"
              rowspanTitle="认养通知"
              title="用户选择保管提示买家"
              :settingInfo="setting.adopt_order_preserve"
            >
            </NoticeTemplate>
            <NoticeTemplate
              @setSetting="setSetting"
              sendType="adopt_order_no_preserve"
              desc="用户选择不保管提示买家"
              :rowspan="0"
              rowspanTitle="认养通知"
              title="用户选择不保管提示买家"
              :settingInfo="setting.adopt_order_no_preserve"
            >
            </NoticeTemplate>
            <!-- <NoticeTemplate
              @setSetting="setSetting"
              sendType="adopt_order_finish"
              desc="认养完成提示买家"
              :rowspan="0"
              rowspanTitle="认养通知"
              title="认养完成提示买家"
              :settingInfo="setting.adopt_order_finish"
            >
            </NoticeTemplate> -->
            <!-- <NoticeTemplate
              @setSetting="setSetting"
              sendType="adopt_order_other_pick_pay"
              desc="支付代采费用提示通知"
              :rowspan="0"
              rowspanTitle="认养通知"
              title="支付代采费用提示通知"
              :settingInfo="setting.adopt_order_other_pick_pay"
            >
            </NoticeTemplate> -->

            <!-- 上门服务 -->
            <NoticeTemplate
              @setSetting="setSetting"
              sendType="agent_examine"
              desc="服务人员审核通过/拒绝立即通知"
              :rowspan="1"
              rowspanTitle="服务人员"
              title="服务人员审核"
              :settingInfo="setting.agent_examine"
            >
            </NoticeTemplate>
          </table>
        </div>
        <div v-if="currentTab == '2'">
          <table style="border-top: 1px solid #e8e8e8">
            <tr style="border-top: 1px solid #e8e8e8">
              <th>推送列表</th>
              <th>内容</th>
              <th>短信</th>
              <th>小程序订阅消息</th>
              <th>公众号订阅消息</th>
              <th>规则</th>
            </tr>
            <!-- 订单通知 -->
            <NoticeTemplate
              @setSetting="setSetting"
              sendType="place_order"
              desc="用户下单，通知上级或平台"
              :rowspan="2"
              rowspanTitle="订单通知"
              title="用户下单通知"
              :settingInfo="setting.place_order"
            >
            </NoticeTemplate>
            <NoticeTemplate
              @setSetting="setSetting"
              sendType="mch_cancel"
              desc="用户退款，通知上级或平台"
              :rowspan="0"
              rowspanTitle=""
              title="订单退款通知"
              :settingInfo="setting.mch_cancel"
            >
            </NoticeTemplate>
            <!-- 商家审核通知 -->
            <NoticeTemplate
              @setSetting="setSetting"
              sendType="mch_examine"
              desc="商家申请入驻，审核结果通知"
              :rowspan="1"
              rowspanTitle="入驻商申请通知"
              title="审核结果通知"
              :settingInfo="setting.mch_examine"
            >
            </NoticeTemplate>
          </table>
        </div>
        <div v-if="currentTab == '3'">
          <a-row :gutter="[16, 30]" type="flex" align="top">
            <a-col class="required" style="text-align: right" :span="3"> 阿里云AccessKeyId： </a-col>
            <a-col :span="21">
              <a-input class="input-class" v-model="params.AccessKeyId" />
            </a-col>
          </a-row>
          <a-row :gutter="[16, 30]" type="flex" align="top">
            <a-col class="required" :span="3" style="text-align: right"> 阿里云AccessKeySecret： </a-col>
            <a-col :span="21">
              <a-input class="input-class" v-model="params.AccessKeySecret" />
            </a-col>
          </a-row>
          <a-row :gutter="[16, 30]" type="flex" align="top">
            <a-col class="required" :span="3" style="text-align: right"> 模板签名： </a-col>
            <a-col :span="21">
              <a-input class="input-class" v-model="params.sign" />
            </a-col>
          </a-row>
          <a-row :gutter="[30, 30]" type="flex" align="middle">
            <a-col offset="10">
              <a-button type="primary" @click="saveSmsData"> 保存 </a-button>
            </a-col>
          </a-row>
        </div>
      </a-card>
    </div>
    <a-card v-if="!setting" :bordered="false">
      <div class="example">
        <a-spin />
      </div>
    </a-card>
    <a-modal v-model="show_setting" title="通知编辑" @ok="settingSave" :confirmLoading="confirmLoading">
      <!-- 短信设置 -->
      <template v-if="type == 'sms'">
        <a-form-model-item label="是否开启">
          <a-radio-group v-model="editInfo[type].is_open">
            <a-radio :value="1"> 开启 </a-radio>
            <a-radio :value="0"> 关闭 </a-radio>
          </a-radio-group>
        </a-form-model-item>
        <a-form-model-item label="模板ID">
          <a-input v-model="editInfo[type].template_id" placeholder="请填写模板ID" />
        </a-form-model-item>
        <a-form-model-item label="模板变量" v-if="void 0 !== editInfo[type].template_var">
          <a-input v-model="editInfo[type].template_var" placeholder="请填写模板变量" />
        </a-form-model-item>
        <a-row>{{ editInfo[type].help }}</a-row>
        <a-form-model-item label="接收手机号" v-if="void 0 !== editInfo[type].receive_mobile">
          <a-input v-model="editInfo[type].receive_mobile" placeholder="请填写手机号" />
        </a-form-model-item>
        <a-row v-if="void 0 !== editInfo[type].receive_mobile">多个手机号以英文‘,’分开</a-row>
      </template>
      <!-- 小程序设置 -->
      <template v-else-if="type == 'miapp'">
        <a-form-model-item label="是否开启">
          <a-radio-group v-model="editInfo[type].is_open">
            <a-radio :value="1"> 开启 </a-radio>
            <a-radio :value="0"> 关闭 </a-radio>
          </a-radio-group>
        </a-form-model-item>
        <a-form-model-item label="模板ID">
          <a-input-search
            v-model="editInfo[type].template_id"
            placeholder="请拉取模板ID"
            enter-button="拉取"
            size="default"
            :loading="searchLoading"
            @search="getMiappTemplateId()"
          />
        </a-form-model-item>
      </template>
      <!-- 微信设置 -->
      <template v-else-if="type == 'wxaapi'">
        <a-form-model-item label="是否开启">
          <a-radio-group v-model="editInfo[type].is_open">
            <a-radio :value="1"> 开启 </a-radio>
            <a-radio :value="0"> 关闭 </a-radio>
          </a-radio-group>
        </a-form-model-item>
        <a-form-model-item label="模板ID">
          <a-input-search
            v-model="editInfo[type].template_id"
            placeholder="请拉取模板ID"
            enter-button="拉取"
            size="default"
            :loading="searchLoading"
            @search="getMiappTemplateId()"
          />
        </a-form-model-item>
      </template>
    </a-modal>
  </page-header-wrapper>
</template>

<script>
import { notice, noticeSave, getTamplateId } from '@/api/setting/notice'
import NoticeTemplate from './components/NoticeTemplate'
import { getSmsConfig, setSmsConfig } from '@/api/setting/sms'

export default {
  name: 'Notice',
  components: {
    NoticeTemplate
  },
  data () {
    return {
      setting: null,
      send_type: '',
      type: '',
      show_setting: false,
      editInfo: null,
      confirmLoading: false,
      searchLoading: false,
      params: {},
      currentTab: '1'
    }
  },
  created () {
    this.getSetting()
    this.getSmsData()
  },
  watch: {},
  methods: {
    changeTabs (tab) {
      this.currentTab = tab
    },
    getSmsData: async function () {
      getSmsConfig({}).then((res) => {
        const data = res.data
        this.params = data.sms
      })
    },
    saveSmsData () {
      var config = {
        AccessKeyId: this.params.AccessKeyId,
        AccessKeySecret: this.params.AccessKeySecret,
        sign: this.params.sign
      }
      const hide = this.$message.loading('提交中', 0)
      setSmsConfig(config).then((res) => {
        hide()
        if (res.code !== 0) {
          this.$error({
            content: res.msg
          })
        } else {
          this.$message.success('保存成功！')
        }
      })
    },
    getSetting () {
      this.loadData = null
      return notice().then((res) => {
        if (res.code == 0) {
          this.setting = res.data
        }
      })
    },
    setSetting (res) {
      this.send_type = res.send_type
      this.type = res.type
      this.editInfo = this.setting[res.send_type]
      this.show_setting = true
    },
    settingSave () {
      this.setting[this.send_type] = this.editInfo
      this.confirmLoading = true
      noticeSave({
        settingInfo: JSON.stringify(this.editInfo),
        send_type: this.send_type,
        type: this.type
      }).then((res) => {
        this.confirmLoading = false
        this.show_setting = false
        console.log(res)
      })
    },
    getMiappTemplateId () {
      this.searchLoading = true
      getTamplateId({
        template_id: this.editInfo[this.type].template_id,
        send_type: this.send_type,
        type: this.type
      }).then((res) => {
        this.searchLoading = false
        if (res.code == 0) {
          this.editInfo[this.type].template_id = res.template_id
          this.editInfo[this.type].kid_list = res.kid_list
        }
      })
      return false
    }
  }
}
</script>
<style lang="less" scoped>
.required::before {
  content: '*';
  color: red;
}
.example {
  text-align: center;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 4px;
  margin-bottom: 20px;
  padding: 30px 50px;
  margin: 20px 0;
}
th {
  padding: 10px;
  border-right: 1px solid #e8e8e8;
  border-left: 1px solid #e8e8e8;
}
td {
  padding: 10px;
  border-right: 1px solid #e8e8e8;
  border-left: 1px solid #e8e8e8;
}
tr {
  width: 100%;
  border-bottom: 1px solid #e8e8e8;
}
table {
  width: 100%;
}
</style>
